<template>
  <view>
    <view  class="u-demo-block">
      <u-gap
          height="15"
          bgColor="#fff"
      ></u-gap>
      <view class="u-demo-block__content">
        <u-skeleton
            :animate="switch1"
            rows="3"
            title
            loading
            avatar
        ></u-skeleton>
      </view>
    </view>
    <view  class="u-demo-block">
      <u-gap
          height="15"
          bgColor="#fff"
      ></u-gap>
      <view class="u-demo-block__content">
        <u-skeleton
            :animate="switch1"
            rows="3"
            title
            loading
            avatar
        ></u-skeleton>
      </view>
    </view>
    <view  class="u-demo-block">
      <u-gap
          height="15"
          bgColor="#fff"
      ></u-gap>
      <view class="u-demo-block__content">
        <u-skeleton
            :animate="switch1"
            rows="3"
            title
            loading
            avatar
        ></u-skeleton>
      </view>
    </view>
    <view  class="u-demo-block">
      <u-gap
          height="15"
          bgColor="#fff"
      ></u-gap>
      <view class="u-demo-block__content">
        <u-skeleton
            :animate="switch1"
            rows="3"
            title
            loading
            avatar
        ></u-skeleton>
      </view>
    </view>
    <view  class="u-demo-block">
      <u-gap
          height="15"
          bgColor="#fff"
      ></u-gap>
      <view class="u-demo-block__content">
        <u-skeleton
            :animate="switch1"
            rows="3"
            title
            loading
            avatar
        ></u-skeleton>
      </view>
    </view>
    <view  class="u-demo-block">
      <u-gap
          height="15"
          bgColor="#fff"
      ></u-gap>
      <view class="u-demo-block__content">
        <u-skeleton
            :animate="switch1"
            rows="3"
            title
            loading
            avatar
        ></u-skeleton>
      </view>
    </view>
    <view  class="u-demo-block">
      <u-gap
          height="15"
          bgColor="#fff"
      ></u-gap>
      <view class="u-demo-block__content">
        <u-skeleton
            :animate="switch1"
            rows="3"
            title
            loading
            avatar
        ></u-skeleton>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      switch1: true,
      switch2: false
    };
  }
}
</script>

<style lang="scss">
.u-skeleton-slot {
  @include flex;
  align-items: flex-start;

  &__image {
    width: 40px;
    height: 40px;
    border-radius: 100px;
  }

  &__content {
    margin-left: 10px;
    flex: 1;
  }
}
</style>
